<template>
  <div class="" style="margin: 20px;">
    <div class="" style="margin: 20px;">
      <el-button @click="dialogVisibleAdd = true" type="primary">新增</el-button>
    </div>
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="count" label="人数" width="180">
        </el-table-column>
        <el-table-column prop="order" label="循序">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>

            <el-button @click="handleDel(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="提示" :visible.sync="dialogVisibleAdd" width="30%">
      <div class="">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="循序">
            <el-input v-model="form.order"></el-input>
          </el-form-item>
          <el-form-item label="人数">
            <el-input v-model="form.count"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="subAdd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" width="30%">
      <div class="">
        <el-form ref="form_edit" :model="form_edit" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form_edit.title"></el-input>
          </el-form-item>
          <el-form-item label="循序">
            <el-input v-model="form_edit.order"></el-input>
          </el-form-item>
          <el-form-item label="人数">
            <el-input v-model="form_edit.count"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="subEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from './api'
  import {
    crudOptions
  } from './crud'
  import {
    d2CrudPlus
  } from 'd2-crud-plus'
  export default {
    name: 'page1',
    mixins: [d2CrudPlus.crud],
    data() {
      return {
        tableData: [],
        dialogVisibleAdd: false,
        dialogVisibleEdit: false,
        form: {},
        form_edit: {

        }
      }
    },
    created() {
      console.log('slllll')
      this.getList()
    },
    methods: {
      getList() {
        this.getAxios('api/depart/depart/').then((res) => {
          console.log('res', res)
          this.tableData = res.data.data;
        })
      },
      subAdd() {
        this.postAxios('api/depart/depart/', this.form).then((res) => {
          console.log('res', res)
          this.getList()
          this.dialogVisibleAdd = false;
        })
      },
      subEdit() {
        this.putAxios(`api/depart/depart/${this.form_edit.id}/`, this.form_edit).then((res) => {
          console.log('res', res)
          this.getList()
          this.dialogVisibleEdit = false;
        })
      },
      handleEdit(row) {
        this.form_edit = Object.assign({}, row)
        console.log('this.form_edit', this.form_edit)
        this.dialogVisibleEdit = true;
      },
      handleDel(row) {
        let _this = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  _this.delAxios(`api/depart/depart/${row.id}/`, row).then((res) => {
                    console.log('res', res)
                    _this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    _this.getList()
                  })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });

      },

    }
  }
</script>
